<!DOCTYPE HTML>
<html>

<head>
   <title> 新增发现</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div class="container">
      <div class="detail-page span24">
         <div class="detail-page-title">
            <h4>新增发现
               <a class="page-action pull-right jx-btn" data-type="close" href="javascript:;">返回</a>
            </h4>
         </div>
         <div class="detail-section" style="margin-top:50px">
            <form id="J_Form" class="jx-form form-horizontal jx-form-thin">
               <div class="panel">
                  <div class="panel-header">
                     发现
                  </div>
                  <div class="panel-body">

                     <div class="row">
                        <div class="control-group span12 offset6">
                           <label class="control-label">标 签：</label>
                           <div class="controls">
                              <select name="" id="">
                                 <option value="">请选择</option>
                                 <option value="">今日推荐</option>
                                 <option value="">限时秒杀</option>
                              </select>
                           </div>
                        </div>
                     </div>
                     <div class="row">
                        <div class="control-group span12 offset6">
                           <label class="control-label">推广文案：</label>
                           <div class="controls control-row4">
                              <textarea style="height:60px" class="input-large" type="text" data-rules="{required:true}"></textarea>
                           </div>
                        </div>
                     </div>
                     <div class="row">
                        <div class="control-group span12 offset6">
                           <label class="control-label">类 别：</label>
                           <div class="controls">
                              <select name="" id="type" data-rules="{required:true}">
                                 <option value="">请选择</option>
                                 <option value="single">单品</option>
                                 <option value="list">列表</option>
                            </select>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="panel">
                  <div class="panel-header">
                     编辑商品及图片
                  </div>
                  <div class="panel-body">
                     <!--<form id="singleForm" class="jx-form form-horizontal jx-form-thin">-->
                     <div class="item" id="single">
                        <div class="row">
                           <div class="control-group span12 offset6">
                              <label class="control-label">关联商品：</label>
                              <div class="controls search-new-pro">
                                 <input type="text" class="new-pro-id control-text" placeholder="请输入关联商品货号" name="id">
                                 <button style="margin-left:10px" type="button" id="single-search" class="search-good pull-right jx-btn"> 搜索</button>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group span15 offset6" id="single-search-result">

                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group span12 offset6">
                              <label class="control-label">分享售价：</label>
                              <div class="controls">
                                 <input type="text" class="control-text" name="saleprice" data-rules="{required:true}">
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group span12 offset6">
                              <label class="control-label">返佣比例：</label>
                              <div class="controls">
                                 <input type="text" class=" control-text" name="rebate" data-rules="{required:true,number:true}">
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group span17 offset6">
                              <label class="control-label">上传图片：</label>
                              <div class="controls span12" style="height:400px">
                                 <div class="row">
                                    <!--foreach-->
                                    <div class="control-group span3">
                                       <div class="center">
                                          <input type="file" class="hide">
                                          <a href="javascript:;" class="btn-upload">
                                          <span>上传图片</span>
                                          <img src="" width="98" height="98">
                                          <input name="image" type="text" data-rules="{required:true}" value="" style="display: none">
                                        </a>
                                       </div>
                                    </div>
                                    <!--foreach-->
                                 </div>

                              </div>
                           </div>
                        </div>
                        <!--<div class="actions-bar">
                              <div class="row">
                                 <div class="span12 offset10 ">
                                    <button type="submit" class="button button-primary">确定</button>
                                    <button type="reset" class="button">重置</button>
                                 </div>
                              </div>
                           </div>-->
                     </div>
                     <!--</form>-->
                     <!--<form id="listForm" class="jx-form form-horizontal jx-form-thin">-->
                     <div class="item" id="list" style="display:none">
                        <div class="row">
                           <div class="control-group span17 offset6" id="">
                              <div class="row">
                                 <div class="control-group span3">
                                    <div class=" center">
                                       <img id="pro1" src="../../../assets/img/u9486.png" style="width:100px" alt="">
                                    </div>
                                 </div>
                                 <div class="control-group span3">
                                    <div class=" center">
                                       <img id="pro2" src="../../../assets/img/u9486.png" style="width:100px" alt="">
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <!--<div class="actions-bar">
                              <div class="row">
                                 <div class="span12 offset10 ">
                                    <button type="submit" class="button button-primary">确定</button>
                                    <button type="reset" class="button">重置</button>
                                 </div>
                              </div>
                           </div>-->
                     </div>
                     <!--</form>-->
                  </div>
               </div>
               <div class="actions-bar">
                  <div class="row">
                     <div class="span12 offset10 ">
                        <button type="submit" class="button button-primary">确定</button>
                        <button type="reset" class="button">重置</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
      <!-- script end -->
   </div>
   <div id="content" class="hide">
      <form id="L_Form" class="jx-form form-horizontal jx-form-thin">
         <div class="row">
            <div class="control-group control-row6 span12">
               <label for="" class="control-label has-note">
            上传图片:
            <div class="label-note"> 图标尺寸:
              <br> px*px
            </div>
          </label>
               <div class="controls">
                  <input id="upload-img" name="img" type="file" class="hide" data-rules="{required:true}">
                  <a href="#" class="btn-upload">
                     <span>上传图片</span>
                     <img src="" name="src" width="98" height="98">
                  </a>
               </div>
            </div>
         </div>

         <div class="row">
            <div class="control-group span15">
               <label class="control-label">关联商品：</label>
               <div class="controls search-new-pro">
                  <input type="text" class="new-pro-id  control-text" placeholder="请输入关联商品货号" name="id" data-rules="{required:true}">
                  <button style="margin-left:10px" type="button" id="list-search" class="search-good pull-right jx-btn"> 搜索</button>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span15" id="list-search-result">

            </div>
         </div>
         <div class="row">
            <div class="control-group span15">
               <label class="control-label">商品售价：</label>
               <div class="controls">
                  <input type="text" class="control-text" name="saleprice" data-rules="{required:true}">
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span15">
               <label class="control-label">返佣比例：</label>
               <div class="controls">
                  <input type="text" class="control-text" name="rebate" data-rules="{required:true}">
               </div>
            </div>
         </div>
      </form>
   </div>

   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/admin.js"></script>

   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <script type="text/javascript">
   </script>
   <script type="text/javascript">
      BUI.use(['bui/editor', 'bui/overlay', 'bui/form', 'bui/tab'], function (Editor, Overlay, Form, Tab) {
         var form = new Form.Form({
            srcNode: "#J_Form"
         });
         form.render();
         // var singleForm = new Form.Form({
         //    srcNode: "#singleForm"
         // });
         // form.render();

         form.addDependence('#type:change', function () { //当按钮#btn点击时，表单交替显示隐藏
            //TO DO
         });
         $("#type").change(function () {
            id = $(this).val();
            console.log('#' + id + "Form")
            $(".panel-body .item").css("display", "none")
            $("#" + id).css("display", "block");
            if (id == "list") {
               var saleprice = form.getField('saleprice');
               saleprice.removeRule('required');
               var rebate = form.getField('rebate');
               rebate.removeRule('required');
               var image = form.getField('image');
               image.removeRule('required');
            } else {
               var saleprice = form.getField('saleprice');
               saleprice.addRule('required', true);
               var rebate = form.getField('rebate');
               rebate.addRule('required', true);
               var image = form.getField('image');
               image.addRule('required', true);
            }
         });
         // var form = new Form.Form({
         //     srcNode: "#singleForm"
         //   });
         //   form.render();
         //点击搜索商品货号
         function openDialog(id) {
            var dialog = new Overlay.Dialog({
               title: '搜索商品',
               width: 600,
               height: 250,
               bodyContent: ' <table style="width:550px" cellspacing="0" class="center jx-table table-bordered">' +
                  '<thead><tr><th>商品货号</th> <th>商品图片</th> <th>商品名称</th> <th>品牌</th> </tr></thead>' +
                  '<tbody>' +
                  '<tr>' +
                  '<td>844092</td>' +
                  '<td><img width="150px" src="../../../assets/img/u9486.png"></td>' +
                  '<td>W NIKE ROSHE ONE</td>' +
                  '<td>Nike</td>' +
                  '</tr>' +
                  '</tbody>' +
                  '</table>',
               success: function () {
                  //table
                  $("#" + id + "-result").append(this.__attrVals.bodyContent)
                  this.close();
               }
            });
            dialog.show();
         }
         $('#single-search, #list-search').on('click', function () {
            var idStr = $(this).parent().find(".new-pro-id").val().trim().toLowerCase();
            if (idStr == "") {
               BUI.Message.Alert('请输入货号', function () {}, 'info')
            } else {
               //ajax请求成功
               openDialog($(this).attr("id"));
            }
         });

         function openEditor(proid) {
            var editor = new Editor.DialogEditor({
               contentId: 'content',
               width: 600,
               title: '图片编辑',
               form: {
                  srcNode: '#L_Form'
               },
               //mask : false,
               success: function () {
                  this.accept();
                  //获取表单的值
                  console.log(editor.getValue())
                  var src = editor.getValue().img;
                  //清除表单
                  if (editor.isValid()) {
                     //图片显示
                     $("#" + proid).attr("src", src);
                     $(".btn-upload").find("span").css("color", "#fff").html("上传图片");
                     $(".btn-upload").find("img").attr("src", "");
                     // editor.clearValue();
                  }
               },
               cancel: function () {
                  $(".btn-upload").find("span").css("color", "#fff").html("上传图片");
                  $(".btn-upload").find("img").attr("src", "");
                  editor.clearValue();

               }
            });

            editor.render();
            editor.show();

         }
         //创建编辑器
         var editor = new Editor.DialogEditor({
            contentId: 'content',
            width: 600,
            title: '图片编辑',
            form: {
               srcNode: '#L_Form'
            },
            //mask : false,
            success: function () {
               this.accept();
               //获取表单的值
               console.log(editor.getValue())
               var src = editor.getValue().img;
               //清除表单
               if (editor.isValid()) {
                  //图片显示
                  $("#" + proid).attr("src", src);
                  $(".btn-upload").find("span").css("color", "#fff").html("上传图片");
                  $(".btn-upload").find("img").attr("src", "");
                  // editor.clearValue();
               }
            },
            cancel: function () {
               $(".btn-upload").find("span").css("color", "#fff").html("上传图片");
               $(".btn-upload").find("img").attr("src", "");
               editor.clearValue();

            }
         });
         editor.render();



         $('#list img').on('click', function () {
            $("#upload-img").attr("data-pro", $(this).attr("id"))
            editor.show();
            //openEditor($(this).attr("id"))

         });

      });
   </script>

</body>

</html>